<template>
	<view class="content">
		<view class="top">
			<view class="top1">
				<view class="avatar"><image :src="info.picture" mode=""></image></view>
				<view class="nickname">{{ info1.nickName }}</view>
				<view class="certification" style="margin-top: 38rpx;">
					<image src="../../static/home/my7.png" mode="" style="margin-right: 10rpx;"></image>
					<text class="text" @click="verified">实名认证</text>
					<view class="shuxian"></view>
					<view class="huiyuan" @click="mbrDetails">{{ info.level }}</view>
				</view>
			</view>
		</view>

		<swiper :autoplay="true" :interval="5000" :duration="1000" v-if="info.status !== 1" @change="carouselFlg(e)">
			<swiper-item v-for="(item, index) in info.data_info" :key="index">
				<view class="swiper-item">
					<view class="box">
						<view class="info">
							<text class="text">正在使用车辆</text>
							<text class="text1">{{ item.name }}</text>
						</view>
						<view class="info1">
							<view class="tmLeft">剩余时间 :</view>
							<view class="countdown">
								<u-count-down
									separator-size="22"
									font-size="27"
									ref="uCountDown"
									:timestamp="timestamp"
									:separator="zh"
									:bg-color="transparent"
									separator-color="#DB000A"
									color="#DB000A"
								></u-count-down>
								<!-- <view class="image" v-for="(item,index) in tmLeft" :key="index">
									{{item}}
									:autoplay="false"
								</view> -->
							</view>
						</view>
						<view class="info2" @click="checkOrdr(item.oid)">查看订单详情 ></view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="speed" style=" position: relative; background-color: #2a2929; width: 703rpx; margin: 0 auto;">
			<view :class="['speed1', info.data_info.length > 0 ? '' : 'kongzhi']">
				<view class="bal">
					<text style="flex: 1;" class="text text-price">{{ info.money }}</text>
					<text style="flex: 1;" class="text1">{{ info.integral }}</text>
				</view>
			</view>
			<view class="chongzhi" @click="topupPage"><image src="../../static/home/my12.png" mode=""></image></view>
			<view class="jifeng"><image src="../../static/home/my5.png" mode=""></image></view>
		</view>
		<view class="" style=" height: 40rpx; background-color: #2a2929; width: 703rpx; margin: 0  auto;"></view>
		<!-- <view class="list">
			<view class="redHorz"></view>
			<view class="ew1">
				<image src="../../static/home/my6.png" mode="aspectFill" style="width: 28rpx; height: 30rpx; margin-right: 22rpx;"></image>
				<text v-if="info.deposit">押金：{{ info.deposit }}</text>
				<text v-else>押金：0</text>
			</view>
			<view class="ew2"></view>
		</view> -->

		<!-- <view class="list">
			<view class="redHorz"></view>
			<view class="ew1">
				<image src="../../static/home/my4.png" mode="" style="width: 24rpx; height: 30rpx;"></image>
				<text>待处理违章</text>
			</view>
			<view class="ew2">></view>
		</view> -->

		<view class="list" @click="shareIt(1)">
			<view class="redHorz"></view>
			<view class="ew1">
				<image src="../../static/home/my10.png" mode="" style="width: 36rpx; height: 30rpx;  margin-right: 14rpx;"></image>

				<button class="u-reset-button text" open-type="share">邀请好友</button>
			</view>
			<view class="ew2">></view>
		</view>
		<view class="list" @click="vehHosting">
			<view class="redHorz"></view>
			<view class="ew1">
				<image src="../../static/home/my1.png" mode="" style="width: 30rpx; height: 30rpx;  margin-right: 20rpx;"></image>
				<text>车辆托管</text>
			</view>
			<view class="ew2">></view>
		</view>
		<view class="list" @click="coupon">
			<view class="redHorz"></view>
			<view class="ew1">
				<image src="../../static/home/my11.png" mode="" style="width: 34rpx; height: 30rpx;  margin-right: 16rpx;"></image>
				<text>优惠券</text>
			</view>
			<view class="ew2">></view>
		</view>
		<view class="list" @click="toSettingPage('../../subPages/administrators/administrators')" v-if="info.is_admin">
			<view class="redHorz"></view>
			<view class="ew1">
				<image src="../../static/home/my3.png" mode="" style="width: 26rpx; height: 30rpx;  margin-right: 24rpx;"></image>
				<text>管理员</text>
			</view>
			<view class="ew2">></view>
		</view>

		<view class="list" @click="dealer" v-if="info.is_agent">
			<view class="redHorz"></view>
			<view class="ew1">
				<image src="../../static/home/my2.png" mode="" style="width: 30rpx; height: 30rpx;  margin-right: 20rpx;"></image>
				<text>经销商</text>
			</view>
			<view class="ew2">></view>
		</view>

		<view class="list" @click="team">
			<view class="redHorz"></view>
			<view class="ew1">
				<image src="../../static/home/my9.png" mode="" style="width: 36rpx; height: 30rpx;  margin-right: 14rpx;"></image>
				<text>团队</text>
			</view>
			<view class="ew2">></view>
		</view>

		<view class="list" @click="topupPage">
			<view class="redHorz"></view>
			<view class="ew1">
				<image src="../../static/home/my2.png" mode="" style="width: 30rpx; height: 30rpx;  margin-right: 20rpx;"></image>
				<text>充值</text>
			</view>
			<view class="ew2">></view>
		</view>

		<view class="list" style="border: none;" @click="jumpSettings">
			<view class="ew1">
				<image src="../../static/home/shehzi.png" mode="" style="width: 30rpx; height: 30rpx;  margin-right: 20rpx;"></image>
				<text>设置</text>
			</view>
			<view class="ew2">></view>
		</view>

		<view class="" style=" height: 40rpx; background-color: #2a2929; width: 703rpx; margin: 0  auto;"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			info: {},
			info1: {},
			uid: '',
			tmLeft: '', // 剩余时间
			timestamp: '',
			timestamp11: '',
			isred: false,
		};
	},
	onLoad() {
		if (!uni.getStorageSync('uid')) {
			uni.navigateTo({
				url: '../logIn/logIn',
			});
		}

		this.info1 = uni.getStorageSync('info');
		this.uid = uni.getStorageSync('uid');
		this.mine();
	},
	onShow() {
		this.mine();
	},
	methods: {
		carouselFlg(e) {
			console.log('e :>> ', e);
		},
		dealer() {
			uni.navigateTo({
				url: 'dealer/dealer',
			});
		},
		checkOrdr(e) {
			uni.navigateTo({
				url: '../order/submitOrdr/submitOrdr?oid=' + e,
			});
		},
		verified() {
			uni.navigateTo({
				url: './certification/certification',
			});
		},
		//车辆托管
		toSettingPage(url) {
			uni.navigateTo({
				url,
			});
		},
		vehHosting() {
			uni.navigateTo({
				url: './hosting/hosting',
			});
		},
		team() {
			uni.navigateTo({
				url: './myTeam/myTeam',
			});
		},
		// 充值金额
		topupPage(e) {
			this.isred = true;
			uni.navigateTo({
				url: './rchg/rchg',
			});
		},
		//分享
		shareIt() {
			this.isred = true;

			this.$u.mpShare;
		},
		//设置
		jumpSettings() {
			uni.navigateTo({
				url: './setUp/setUp',
			});
		},
		//  优惠券
		coupon() {
			uni.navigateTo({
				url: './coupon/coupon',
			});
		},
		// 会员详情
		mbrDetails() {
			uni.navigateTo({
				url: './mbrDetails/mbrDetails',
			});
		},
		// 我的页面
		async mine() {
			const res = await this.$u.post('api/user/user_index', {
				uid: this.uid,
			});
			if (!res.code) return uni.$showMsg();
			this.info = res.data;
			// info.is_agent
			uni.setStorageSync('agent', res.data.is_agent);

			var startingTm = res.data.data_info[0].car_time[0];
			var endTm = res.data.data_info[0].car_time[1];
			var rollingTm = Number(res.data.data_info[1].car_time[1]) - Number(res.data.data_info[0].car_time[0]); //滚动

			if (Number(+new Date() / 1000).toFixed() < startingTm) {
				this.timestamp = endTm - startingTm;
			} else {
				this.timestamp = endTm - Number(+new Date() / 1000).toFixed();
			}

			// var a  = res.data.car_time -Number(+new Date() / 1000).toFixed() ;
			// this.timestamp = a
			// console.log('a :>> ', a);
			// var ab  = this.tmFmt(a*1000)
			// this.tmLeft = ab.split("")
		},
		tmFmt(mss) {
			let days = Math.floor(mss / (1000 * 60 * 60 * 24));
			let hours = Math.floor((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
			let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
			let seconds = Math.round((mss % (1000 * 60)) / 1000);
			return days + '天' + hours + '时' + minutes + '分' + seconds + '秒';
		},
	},
	onShareAppMessage(e) {
		return {
			title: '天安超跑:', // 默认是小程序的名称(可以写slogan等)
			path: '/pages/index/index?user_id=' + uni.getStorageSync('uid'), // 默认是当前页面，必须是以‘/’开头的完整路径
			imageUrl: 'http://sprtcar.oss-cn-chengdu.aliyuncs.com/car/254dea711859e89f7dbdc875bed32cb803354f47.jpeg', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
			success: function(res) {
				// 转发成功之后的回调
				if (res.errMsg == 'shareAppMessage:ok') {
				}
			},
		};
	},
};
</script>

<style lang="scss" scoped>
.content {
	background-color: #1b1b1b;
	.kongzhi {
		margin-top: -80rpx;
	}

	/deep/swiper {
		margin-top: -200rpx !important;
	}
	.red {
		color: red;
	}
	.slot-content {
		padding: 50rpx 150rpx;
		input {
			border-bottom: 1rpx solid #cccccc;
			display: flex;
			justify-content: center;
			text-align: center;
			align-items: center;
			height: 50rpx;
		}
	}

	.top {
		background-color: #1b1b1b;
		.top1 {
			width: 100vw;
			height: 600rpx;
			border-bottom-left-radius: 50% 20%;
			border-bottom-right-radius: 50% 20%;

			background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/my16.png) no-repeat center;
			background-size: cover;
			overflow: hidden;
		}
		.avatar {
			width: 135rpx;
			height: 135rpx;
			border-radius: 50%;

			//background-color: #0081ff;
			margin: 0 auto;
			margin-top: 88rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.nickname {
			width: 100%;
			text-align: center;
			margin-top: 15rpx;

			font-size: 36rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #dddddd;
		}
		.certification {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 34rpx;
			image {
				width: 34rpx;
				height: 24rpx;
			}
			.text {
				height: 25rpx;
				font-size: 27rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #dddddd;
				line-height: 19rpx;
			}
			.shuxian {
				width: 3rpx;
				height: 18rpx;

				margin: 0 25rpx;
				background-color: #dddddd;
			}
			.huiyuan {
				background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/my13.png) no-repeat center;
				background-size: cover;
				width: 116rpx;
				height: 34rpx;
				font-size: 22rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #303032;
				line-height: 34rpx;
				text-align: center;
			}
		}
	}
	.box {
		margin: 0 auto;
		//margin-top: -85rpx;
		width: 712rpx;
		height: 276rpx;
		background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E7%BB%84%2081%402x.png) no-repeat center;
		background-size: cover;
		border-radius: 20rpx;
		margin-bottom: 39rpx;
		padding: 37rpx 39rpx;
		.info {
			height: 78.3rpx;
			border-left: 5rpx solid #ffffff;
			opacity: 0.8;
			padding-left: 29rpx;
			.text {
				display: block;
				font-size: 36rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #ffffff;
			}
			.text1 {
				display: block;
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ffffff;
			}
		}
		.info1 {
			height: 48rpx;
			display: flex;
			align-items: center;
			margin-top: 38rpx;
			.tmLeft {
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ffffff;
				opacity: 0.7;
				margin-right: 22rpx;
			}
			.countdown {
				display: flex;
				/deep/.u-countdown-item {
					width: 35rpx;
					height: 48rpx;
					background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/my8.png) no-repeat center;
					background-size: cover;
					margin-right: 8rpx;
				}
				/deep/ .u-countdown-colon {
					width: 35rpx;
					height: 48rpx;
					background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/my8.png) no-repeat center;
					background-size: cover;
					margin-right: 8rpx;
				}

				.image {
					display: flex;
					align-items: center;
					justify-content: center;
					background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/my8.png) no-repeat center;
					background-size: cover;
					width: 34rpx;
					height: 48rpx;
					margin-right: 8rpx;
					font-size: 34rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #db000a;
					text-shadow: 3rpx 2rpx 0rpx #000000;
				}
			}
		}
		.info2 {
			text-align: right;
			margin-top: 19rpx;

			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;

			opacity: 0.8;
		}
	}
	.chongzhi {
		position: absolute;
		bottom: 29rpx;
		left: 269rpx;
		width: 62rpx;
		height: 62rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.jifeng {
		position: absolute;
		bottom: 29rpx;
		right: 269rpx;
		width: 62rpx;
		height: 62rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.speed1 {
		width: 703rpx;
		height: 267rpx;
		background-color: #2a2929;
		background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/my15.png) no-repeat center;
		background-size: cover;
		display: flex;
		align-items: center;
		.bal {
			width: 100%;
			height: 43rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: -32rpx;
			text {
				text-align: center;
				font-size: 53rpx;
				font-family: LCD2Normal;
				font-weight: 400;
				color: #b9b9b9;
				line-height: 43rpx;
			}
		}
	}
	.list {
		position: relative;
		background-color: #2a2929;
		width: 703rpx;
		margin: 0 auto;
		padding: 0 60rpx;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #141414;
		.redHorz {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 98rpx;
			height: 1rpx;
			background-color: #ad0003;
		}
		.ew1 {
			display: flex;
			align-items: center;

			image {
				display: inline-block;
				width: 28rpx;
				height: 30rpx;
				//margin-right: 20rpx;
			}
			text,
			.text {
				font-size: 31rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #dddddd;
			}
		}
		.ew2 {
			font-size: 31rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #dddddd;
		}
	}
}
</style>
